<template>
  <div class="map">
    <baidu-map
     class="bm-view"
     :center="center"
     :zoom="zoom"
     @ready="handler"
     :ak="ak"
     :scroll-wheel-zoom="true"
     @click="handleMapClick"
     @mousemove="handleMapMove"
     @rightclick="rightclick"
     >
      <!-- <bm-polyline :path="paths"></bm-polyline> -->
       <!-- <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale> -->
      <!-- <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></bm-map-type> -->
      <bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT"></bm-city-list>
      <!-- <bm-control>
        <button @click="addZoom(19)">缩放至最大</button>
        <button @click="addZoom(10)">还原</button>
        <button @click="addZoom(3)">缩放至最小</button>
      </bm-control> -->

      <!-- <bm-marker :position="{lng: 116.404, lat: 39.915}" :dragging="true" animation="BMAP_ANIMATION_BOUNCE" @dragstart="markerDargstart">
        <bm-label content="我爱北京天安门" :labelStyle="{color: 'red', fontSize : '24px'}" :offset="{width: -35, height: 30}"/>
      </bm-marker>
      <bm-marker-clusterer :averageCenter="true">
        <bm-marker :position="{lng: point.lng, lat: point.lat}" v-for="(point, index) in marks" :key="index"></bm-marker>
      </bm-marker-clusterer>  -->

        <bm-driving :start="lsstart" :end="lsend" :waypoints="waypoint" @searchcomplete="handleSearchComplete" :panel="false" :autoViewport="true"></bm-driving>
        
        <bm-polyline :path="pointList"></bm-polyline>
        <bm-lushu :start="lsstart" :end="lsend" :path="pointList" :icon="lsicon" :play="lsplay" :rotation="false" :speed="speedToNum" @stop="lsreset" :content="lscontent">
        </bm-lushu>
     </baidu-map>


    <form class="form-wrap">
      <div class="form-item">
        <button @click="togglePlay">出发/暂停</button>
      </div>
      <div class="form-item">
        <input type="text" v-model=speed>
      </div>
      <div class="form-item">
        <textarea type="text" v-model="lscontent"></textarea>
      </div>
    </form>
     
  </div>
</template>

<script>

import BaiduMap from 'vue-baidu-map/components/map/Map.vue'

import BmPolyline from 'vue-baidu-map/components/overlays/Polyline.vue'
import BmMarker from 'vue-baidu-map/components/overlays/Marker.vue'

import BmScale from 'vue-baidu-map/components/controls/Scale.vue'
import BmMapType from 'vue-baidu-map/components/controls/MapType.vue'
import BmCityList from 'vue-baidu-map/components/controls/CityList.vue'
import BmControl from 'vue-baidu-map/components/controls/Control.vue'

import BmMarkerClusterer from 'vue-baidu-map/components/extra/MarkerClusterer.vue'
import BmLushu from 'vue-baidu-map/components/extra/Lushu.vue'

import BmDriving from 'vue-baidu-map/components/search/Driving.vue'


export default {
  name: "Map",
  data() {
    const marks = []
    // for(let i=0;i<100;i++){
    //   marks.push({lng: Math.random()*40+ 85,lat: Math.random()*30+21})
    //   console.log(marks)
    // }
    return {
      center: {lng: 0, lat: 0},
      zoom: 3,
      ak: 'pPurcozpqQVKnZg8NTG2peBYbxVZj5rx',
      paths: [
        // {lng: 116.403569, lat: 39.920202},
        // {lng: 116.364475, lat: 39.965231}
      ],
      marks: marks,
      lspath: [
        // {lng: 116.403569, lat: 39.920202},
        // {lng: 116.404, lat: 39.915}
      ],
      lsplay: true,
      lsicon: {
        url: 'http://api.map.baidu.com/library/LuShu/1.2/examples/car.png',
        size: {width: 52,height:26}
      },
      speed: 500,
      start: {lng: 116.403569, lat: 39.920202}, //'天安门'
      end: {lng: 116.404, lat: 39.915}, // '百度'
      lscontent: '秋名山见！',
      lsstart: null,
      lsend: null,
      waypoints: [
          {
              speed:20,
              poiType:0,
              lng:117.143532,
              lat:31.823004,
              poiTime:1609567200000,
              signalIntensity:4,
              gpsNum:10,
              direction:120,
              soc:null
          },
          {
              speed:20,
              poiType:0,
              lng:117.142616,
              lat:31.822268,
              poiTime:1609567320000,
              signalIntensity:4,
              gpsNum:10,
              direction:120,
              soc:null
          },
          {
              speed:20,
              poiType:0,
              lng:117.140793,
              lat:31.822237,
              poiTime:1609567440000,
              signalIntensity:4,
              gpsNum:10,
              direction:120,
              soc:null
          },
          {
              speed:20,
              poiType:0,
              lng:117.137747,
              lat:31.822245,
              poiTime:1609567560000,
              signalIntensity:4,
              gpsNum:10,
              direction:120,
              soc:null
          },
          {
              speed:20,
              poiType:0,
              lng:117.133664,
              lat:31.822297,
              poiTime:1609567680000,
              signalIntensity:4,
              gpsNum:10,
              direction:120,
              soc:null
          },
          {
              speed:20,
              poiType:0,
              lng:117.131508,
              lat:31.822335,
              poiTime:1609567800000,
              signalIntensity:4,
              gpsNum:10,
              direction:120,
              soc:null
          },
          {
              speed:20,
              poiType:0,
              lng:117.131329,
              lat:31.824069,
              poiTime:1609567980000,
              signalIntensity:4,
              gpsNum:10,
              direction:120,
              soc:null
          },
          {
              speed:20,
              poiType:0,
              lng:117.131212,
              lat:31.825756,
              poiTime:1609568040000,
              signalIntensity:4,
              gpsNum:10,
              direction:120,
              soc:null
          },
          {
              speed:20,
              poiType:0,
              lng:117.131275,
              lat:31.827405,
              poiTime:1609568080000,
              signalIntensity:4,
              gpsNum:10,
              direction:120,
              soc:null
          },
          {
              speed:20,
              poiType:0,
              lng:117.128328,
              lat:31.827635,
              poiTime:1609568130000,
              signalIntensity:4,
              gpsNum:10,
              direction:120,
              soc:null
          }
      ]
    }
  },
  components: {
      BaiduMap,
      BmPolyline,
      BmMarker,
      BmScale,
      BmMapType,
      BmCityList,
      BmControl,
      BmMarkerClusterer,
      BmLushu,
      BmDriving
  },
  computed: {
    speedToNum() {
      return this.speed && parseInt(this.speed)
    },
    waypoint() {
      var plist = this.waypoints.map(item => {
        var point = {
          lng: item.lng,
          lat: item.lat
        };
        return point;
      })
      this.lsstart = plist[0];
      this.lsend = plist[this.waypoints.length-1];
      console.log(this.lsstart)
      console.log(this.lsend)
      return plist;
    }
  },
  methods: {
      // initMap() {
      //     Vue.use(BaiduMap, {
      //       // ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
      //       ak: 'pPurcozpqQVKnZg8NTG2peBYbxVZj5rx'
      //     })
      // }
      togglePlay(){
        console.log(this.lsplay)
        this.lsplay = !this.lsplay
      },
      handler({BMap, map}){
        console.log(BMap, map)
        this.center.lng = 116.404
        this.center.lat = 39.915
        this.zoom = 15
        console.log(this.paths)
      },
      handleMapClick(e) {
        console.log(e)
        console.log(e.point)
        // this.paths.push(e.point)
      },
      handleMapMove(e){
        this.paths.pop();
        this.paths.push(e.point)
      },
      rightclick(){
        this.paths.pop();
      },
      addZoom(zoom) {
        this.zoom = zoom;
      },
      markerDargstart(type, target) {
        console.log(type)
        console.log(target)
      },
      handleSearchComplete(res){
        console.log(res)
        this.pointList = res.getPlan(0).getRoute(0).getPath()
        console.log(res.getPlan(0).getRoute(0).getPath())
      },
      lsreset(){
        // this.lsplay = false;
      }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  .bm-view{
    width: 100%;
    height: 500px;
  }
  .form-wrap{
    width: 500px;
    margin: 30px auto;
    text-align: left;
    .form-item{
      display: block;
      width: 100%;
      margin-bottom: 15px;
      input,textarea{
        width: 200px;
      }
    }

  }
</style>
